<template>
  <div class="home-container">
    <div class="main-content">
      <el-row :gutter="20" class="welcome-row">
        <el-col :md="16" :sm="24">
          <el-card shadow="hover" class="welcome-card gradient">
            <div class="welcome-content">
              <div class="welcome-text">
                <h2>欢迎回来，{{ userInfo?.nickname || userInfo?.username }}！</h2>
                <p>祝你今天工作顺利，效率满满。</p>
              </div>
              <img class="welcome-illustration" src="https://cdn.jsdelivr.net/gh/alohe/illustrations@main/workflow.svg" alt="illustration" />
            </div>
          </el-card>
        </el-col>
        <el-col :md="8" :sm="24">
          <el-card shadow="hover" class="quick-actions">
            <template #header>
              <div class="card-header">
                <span>快捷操作</span>
              </div>
            </template>
            <div class="actions-grid">
              <el-button type="primary" plain @click="$router.push('/user/list')" icon="User">用户</el-button>
              <el-button type="primary" plain @click="$router.push('/system/role')" icon="UserFilled">角色</el-button>
              <el-button type="primary" plain @click="$router.push('/system/menu')" icon="Menu">菜单</el-button>
              <el-button type="primary" plain @click="$router.push('/system/dict')" icon="Tickets">字典</el-button>
              <el-button type="primary" plain @click="$router.push('/notification/list')" icon="Bell">通知</el-button>
              <el-button type="primary" plain @click="$router.push('/chat')" icon="ChatDotRound">聊天</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="info-cards">
        <el-col :span="8">
          <el-card shadow="hover" class="info-card">
            <div class="card-content">
              <el-icon class="card-icon" :size="40" color="#409EFF">
                <User />
              </el-icon>
              <div class="card-info">
                <h3>用户名</h3>
                <p>{{ userInfo?.username }}</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="info-card">
            <div class="card-content">
              <el-icon class="card-icon" :size="40" color="#67C23A">
                <Message />
              </el-icon>
              <div class="card-info">
                <h3>邮箱</h3>
                <p>{{ userInfo?.email || '未设置' }}</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="info-card">
            <div class="card-content">
              <el-icon class="card-icon" :size="40" color="#E6A23C">
                <Phone />
              </el-icon>
              <div class="card-info">
                <h3>手机号</h3>
                <p>{{ userInfo?.phone || '未设置' }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="role-permission-cards">
        <el-col :span="12">
          <el-card shadow="hover" class="info-card-full">
            <template #header>
              <div class="card-header">
                <span>我的角色</span>
              </div>
            </template>
            <div class="role-list">
              <el-tag
                v-for="role in roles"
                :key="role.id"
                type="primary"
                size="large"
                style="margin: 5px"
              >
                {{ role.roleName }}
              </el-tag>
              <el-empty v-if="!roles || roles.length === 0" description="暂无角色" :image-size="60" />
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="hover" class="info-card-full">
            <template #header>
              <div class="card-header">
                <span>我的权限</span>
              </div>
            </template>
            <div class="permission-list">
              <el-tag
                v-for="(permission, index) in permissions"
                :key="index"
                type="success"
                size="small"
                style="margin: 3px"
              >
                {{ permission }}
              </el-tag>
              <el-empty v-if="!permissions || permissions.length === 0" description="暂无权限" :image-size="60" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="user-detail">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>详细信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户ID">{{ userInfo?.id }}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{ userInfo?.username }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ userInfo?.nickname || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="userInfo?.status === 1 ? 'success' : 'danger'">
                {{ userInfo?.status === 1 ? '正常' : '禁用' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ userInfo?.email || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ userInfo?.phone || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="注册时间" :span="2">
              {{ formatDate(userInfo?.createTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { User, Message, Phone } from '@element-plus/icons-vue'

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)
const roles = computed(() => userStore.roles)
const permissions = computed(() => userStore.permissions)

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
}

.main-content {
  padding: 20px;
  background: transparent;
}

.welcome-row { margin-bottom: 20px; }

.welcome-card.gradient {
  background: linear-gradient(135deg, var(--el-color-primary-light-9), #fff);
}

.welcome-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-text h2 {
  font-size: 26px;
  margin: 0 0 8px 0;
}

.welcome-text p { color: #666; }

.welcome-illustration {
  width: 180px;
  opacity: 0.9;
}

.quick-actions .actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.info-cards {
  margin-bottom: 30px;
}

.info-card .card-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
}

.card-icon {
  flex-shrink: 0;
}

.card-info h3 {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
  font-weight: normal;
}

.card-info p {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  word-break: break-all;
}

.user-detail {
  margin-top: 30px;
}

.card-header {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.role-permission-cards {
  margin-bottom: 30px;
}

.info-card-full {
  height: 100%;
}

.role-list,
.permission-list {
  min-height: 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
</style>